<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md15">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">激活数据统计-条件筛选</div>
                                <form class="layui-row layui-form "
                                      style="display: flex;flex-direction: row;margin-top:10px" action="">
                                    <br>
                                    <div class="layui-form">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">日期范围</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" class="layui-input" id="test6"
                                                           placeholder="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="layui-card-body">
                                    <table id="startUp" lay-filter="startUp"></table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">ECharts</div>
                                <div class="layui-card-body">
                                    <div id="main1" style="height:350px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script>
    var startInter = api.inter;
    var audio = "t", startTime, endTime;//初始化查询身份为教师,与当前的时间
    var arrTitle = ['教师端', '安卓学生端', '苹果学生端'];//标题
    var teachData, androidData, iosData;
    var xData = [], yData = [], androidYdata = [], iosYdata = [];//定义存储数组
    $(document).ready(function () {
        layui.use(['form', 'table', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , laydate = layui.laydate;

            //日期范围
            laydate.render({
                elem: '#test6'
                , range: true
                , theme: '#393D49'
                , done: function (value, date, endDate) {
                    value = value.split(" - ");
                    startTime = value[0];
                    endTime = value[1];
                    xData = [];
                    yData = [];
                    androidYdata = [];
                    iosYdata = [];//重新初始数据
                    getStartUp();
                }
            });
            //监听单选框的值

            form.render();


        });
        getDate();
        getStartUp();

    });

    //获取当前的时间
    function getDate() {  //获取当前时间

        var myDate = new Date();

        var y = myDate.getFullYear();    //获取完整的年份

        var m = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
        if (m < 10) {
            m = "0" + m;
        }

        var d = myDate.getDate();        //获取当前日(1-31)

        if (d < 10) {

            d = "0" + d;

        }
        var mytime = y + "-" + m + "-" + d;
        endTime = mytime;
        d = d - 9;
        startTime = y + "-" + m + "-" + 1;

        var testTime = startTime + " 至 " + endTime;
        document.getElementById("test6").setAttribute("placeholder", testTime);


    }

    //获取教师端启动次数的数据
    function getStartUp() {
        //教师端查询
        $.ajax({
            type: 'post',
            url: startInter,
            data: {
                "action": "activeStat",
                "type": "t",
                "chara": '0',
                "start": startTime,
                "end": endTime
            },
            dataType: 'json',
            success: function (res) {

                if (res.code == 0) {
                    var val = res.date, total = res.total;
                    var chara = "0";//教师身份
                    changeData(val, total, chara);
                    getStudentStartUp();
                }
                else {
                    layer.msg(res.msg);
                }
            },
            error: function (res) {
                layer.msg("查询出错");
            }
        });
    }

    //获取安卓学生端启动次数的数据
    function getStudentStartUp() {
        $.ajax({
            type: 'post',
            url: startInter,
            data: {
                "action": "activeStat",
                "type": "s",
                "chara": '1',
                "start": startTime,
                "end": endTime
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    var val = res.date, total = res.total;
                    var chara = "1";//安卓学生端
                    changeData(val, total, chara);
                    getIosStudentStartUp();
                    showEcharts();
                }
                else {
                    layer.msg(res.msg);
                }
            },
            error: function (res) {
                layer.msg("查询出错");
            }
        });
    }

    //获取苹果学生端启动次数的数据
    function getIosStudentStartUp() {
        //教师端查询
        $.ajax({
            type: 'post',
            url: startInter,
            data: {
                "action": "activeStat",
                "type": "s",
                "chara": '2',
                "start": startTime,
                "end": endTime
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    var val = res.date, total = res.total;
                    var chara = "2";//教师身份
                    changeData(val, total, chara);
                    showEcharts();
                }
                else {
                    layer.msg(res.msg);
                }
            },
            error: function (res) {
                layer.msg("查询出错");
            }
        });
    }

    //转化数据格式
    function changeData(val, total, chara) {
        val = JSON.stringify(val);
        val = val.replace("{", "").replace("}", "");
        val = val.split(',');
        switch (chara) {
            case "0":
                for ($i = 0; $i < val.length; $i++) {
                    var valData = val[$i].split(":")[0].replace("\"", "").replace("\"", "");
                    var valYData = val[$i].split(":")[1].replace("\"", "").replace("\"", "");
                    xData.push(valData);
                    yData.push(valYData);

                }
                break;
            case "1":
                for ($i = 0; $i < val.length; $i++) {
                    var valData = val[$i].split(":")[0].replace("\"", "").replace("\"", "");
                    var valYData = val[$i].split(":")[1].replace("\"", "").replace("\"", "");
                    androidYdata.push(valYData);

                }
            case "2":
                for ($i = 0; $i < val.length; $i++) {
                    var valData = val[$i].split(":")[0].replace("\"", "").replace("\"", "");
                    var valYData = val[$i].split(":")[1].replace("\"", "").replace("\"", "");

                    iosYdata.push(valYData);

                }
        }

    }

    function showEcharts() {
        layui.config({
            base: '/src/js/'
        }).use(['jquery', 'mockjs', 'table'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                table = layui.table;

            var intervalIndex = setInterval(function () {
                if (echarts === undefined) {
                    return;
                }
                // 如果eacharts加载完成，则清除循环
                clearInterval(intervalIndex);
                // echart2
                var myChart2 = echarts.init(document.getElementById("main1"));
                var app2 = {};
                option2 = null;
                option2 = {
                    title: {
                        text: '软件激活堆叠区域图'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: arrTitle
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: xData
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '教师端',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            normal: {}
                        },
                        data: yData
                    },
                        {
                            name: '安卓学生端',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal: {}
                            },
                            data: androidYdata
                        },
                        {
                            name: '苹果学生端',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                normal: {}
                            },
                            data: iosYdata
                        },
                    ]
                };
                if (option2 && typeof option2 === "object") {
                    myChart2.setOption(option2, true);
                }

                $(window).on('resize', function () {

                    myChart2.resize();
                });
            }, 50);


        });

    }


</script>
